3<!--
 * @Author: tenet 18742176629@163.com
 * @Date: 2024/7/5 上午10:56
 * @LastEditors: tenet 18742176629@163.com
 * @LastEditTime: 2024/7/5 上午10:56
 * @FilePath: G:/chain-link-api-front/src/views/developerCenter\index2.vue
 * @Description: 开发者中心 2
-->
<!-- developerCenter 开发者中心页 -->
<template>

  <div class="common-layout" >
    <!-- 前台页面统一布局 -->
    <el-container>
      <el-header style="z-index: 1000;">
        <!-- 前台页面 header 组件 -->
        <walletHeader></walletHeader>
      </el-header>
          <el-container style="height: calc(100vh - 80px);">
            <el-aside width="200px" style="padding-top: 60px; height:100%;border-right: #999999 1px solid">
              <el-anchor type="underline" :offset="100" style="height:100%;">
                <el-anchor-link href="#generateAddress" :title="t('title.GenerateAddress')"></el-anchor-link>
                <el-anchor-link href="#withdrawal" :title="t('title.Withdrawal')"></el-anchor-link>
                <el-anchor-link href="#sign" :title="t('devDoc.SignDescription')"></el-anchor-link>
              </el-anchor>
            </el-aside>

            <el-main style="width: 100%; display: flex; flex-direction: column; justify-content: flex-start;align-items: flex-start;">
              <!-- 可滚动的内容 -->
              <div class="scrollable-content" style="height:100%;overflow-y: auto;padding-top: 30px">
              <!--              文档标题-->
              <h1 class="apiTitle">{{ t('devDoc.Title') }}</h1>
              <p class="tips1">{{ t('devDoc.TitleTips1') }} </p>
              <div class="content" >
                <h2>BaseUrl: {{ baseUrl }}</h2>
                <!--  目录  -->
                <h2 class="directoryTitle title">1、{{ t('devDoc.Directory') }}</h2>
                <div class="directBox box" v-for="(item, key) in directoryData" :key="key">
                  <a :href="item.href" class="link">{{ `1.${key + 1}. ` }} {{ item.title }}</a>
                </div>
                <!--  接口明细  -->
                <h2 class="directoryTitle title">2、{{ t('devDoc.InterfaceDetails') }}</h2>
                <!--            接口明细 - 生成地址-->
                <div class="apiItem">
                  <h3 class="" id="generateAddress">2.1 {{ t('title.GenerateAddress') }}</h3>
                  <h4 class="">2.1.1 {{ t('devDoc.ScenarioDescription') }}</h4>
<!--               请求指定币种地址,如要成功获取地址...   -->
                  <p class="sceneContent">{{ t('devDoc.ScenarioDescriptionTips1') }}</p>
                  <h4 class="">2.1.2 {{ t('devDoc.API') + t('devDoc.Detail') }}</h4>
                  <h5 class="">2.1.2.1 {{ t('devDoc.API') + t('devDoc.Address') }}</h5>
                  <!--            /mch/address/create  post  接口詳情 -->
                  <table style="width: 500px">
                    <thead>
                    <tr>
                      <th>{{ t('devDoc.API') + t('devDoc.Detail')}}</th>
                      <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td>URL</td>
                      <td>/api/v2/generateAddress</td>
                    </tr>
                    <tr>
                      <td>{{ t('devDoc.Method')}}</td>
                      <td>POST</td>
                    </tr>
                    </tbody>
                  </table>
                  <h5 class="">2.1.2.2 {{ t('devDoc.Params') }}</h5>
                  <h6 class="">2.1.2.2.1 {{ t('devDoc.Params') + t('devDoc.Explain') }}</h6>
                  <!--            参数说明 表格-->
                  <table style="width: 600px">
                    <thead>
                    <tr>
                      <th>{{ t('devDoc.Params') }}</th>
                      <th>{{ t('devDoc.Type') }}</th>
                      <th>{{ t('devDoc.Required') }}</th>
                      <th>{{ t('devDoc.Explain') }}</th>
                      <th>{{ t('devDoc.Remarks') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td>timestamp</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.timestamp') }}</td>
                      <td>{{t('devDoc.See')}} <a href="#sign" class="link" >{{t('devDoc.InspectionInstructions')}}</a></td>
                    </tr>
                    <tr>
                      <td>nonce</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.nonce') }}</td>
                      <td>{{t('devDoc.See')}} <a href="#sign" class="link"  >{{t('devDoc.InspectionInstructions')}}</a></td>
                    </tr>
                    <tr>
                      <td>sign</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.Sign') }}</td>
                      <td>{{t('devDoc.See')}} <a href="#sign" class="link"  >{{t('devDoc.InspectionInstructions')}}</a></td>
                    </tr>
                    <tr>
                      <td>body</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.MessageContent') }}</td>
                      <td>{{ t('devDoc.JsonInfo') }}</td>
                    </tr>
                    </tbody>
                  </table>
                  <!--            参数说明 多行文本-->

                  <pre>
{
  "merchantId": "66790b44b49fe47b7d13b744",
  "mainCoinType": 999999,
  "callUrl": "http://192.168.0.116:8081/api/v2/generateAddress"
}
</pre>


                  <!--            body 参数字段-->
                  <h6 class="">2.1.2.2.2 {{ t('devDoc.bodyParamsField') }}</h6>
                  <!--                body 参数字段-->
                  <table>
                    <thead>
                    <tr>
                      <th>{{ t('devDoc.bodyParamsName')}} </th>
                      <th>{{ t('devDoc.Type')}} </th>
                      <th>{{ t('devDoc.Required')}} </th>
                      <th>{{ t('devDoc.Explain')}} </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td>merchantId</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.merchantIdInfo')}} </td>
                    </tr>
                    <tr>
                      <td>mainCoinType</td>
                      <td>Integer</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.mainCoinTypeInfo')}} </td>
                    </tr>
                    <tr>
                      <td>callUrl</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.callUrlInfo')}}</td>
                    </tr>
                    </tbody>
                  </table>
                  <!--            示例-->
                  <h6 class="eg">2.1.2.2.3 {{ t('devDoc.Example') }}</h6>
                  <pre>
{
  "timestamp": 1720407493211,
  "nonce": 4978619,
  "sign": "7d33deb6b6c1463bba6ead47ebf58551",
  "body":
    [
      {
        "merchantId":"66790b44b49fe47b7d13b744",
        "mainCoinType":999999,
        "callUrl":"http://192.168.0.116:8081/api/v2/generateAddress"
      }
    ]
}
                  </pre>

                  <h5 class="">2.1.2.3 {{ t('devDoc.StatusCode')}}</h5>
                  <!--            返回状态码表-->
                  <table style="width: 400px">
                    <thead>
                    <tr>
                      <th>code</th>
                      <th>{{ t('devDoc.Interpret')}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, key) in generateAddressCodeList" :key="key">
                      <td>{{ item.code }}</td>
                      <td>{{ item.description}}</td>
                    </tr>
                    </tbody>
                  </table>

                  <!--            调取示例-->
                  <h4 class="">2.1.3 {{ t('devDoc.CallExamples')}}</h4>
                  <h5 class="">2.1.3.1 {{ t('devDoc.Success')}}</h5>
                  <pre>
{
    "code":200,
    "data":null,
    "msg":"成功"
}
                  </pre>

                  <h5 class="">2.1.3.2 {{ t('devDoc.Failed')}}</h5>
                  <pre>
{
    "code":40125,
    "data":null,
    "msg":"body解析錯誤: unexpected end of JSON input"
}
                  </pre>
                </div>

                <!--            接口明细 - 提币-->
                <div class="apiItem">
                  <h3 class="" id="withdrawal">2.1 {{ t('title.Withdrawal') }}</h3>
                  <h4 class="">2.1.1 {{ t('devDoc.ScenarioDescription') }}</h4>
                  <p class="sceneContent">{{ t('devDoc.WithdrawalScenarioDescription') }} </p>
                  <h4 class="">2.1.2 {{ t('devDoc.API') + t('devDoc.Detail') }}</h4>
                  <h5 class="">2.1.2.1 {{ t('devDoc.API') + t('devDoc.Address') }}</h5>
                  <!--            /mch/address/create  post  接口詳情 -->
                  <table style="width: 500px">
                    <thead>
                    <tr>
                      <th>{{ t('devDoc.API') + t('devDoc.Detail')}}</th>
                      <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td>URL</td>
                      <td>/api/v2/withdraw</td>
                    </tr>
                    <tr>
                      <td>{{ t('devDoc.Method')}}</td>
                      <td>POST</td>
                    </tr>
                    </tbody>
                  </table>
                  <h5 class="">2.1.2.2 {{ t('devDoc.Params') }}</h5>
                  <h6 class="">2.1.2.2.1 {{ t('devDoc.Params') + t('devDoc.Explain') }}</h6>
                  <!--            参数说明 表格-->
                  <table style="width: 600px">
                    <thead>
                    <tr>
                      <th>{{ t('devDoc.Params') }}</th>
                      <th>{{ t('devDoc.Type') }}</th>
                      <th>{{ t('devDoc.Required') }}</th>
                      <th>{{ t('devDoc.Explain') }}</th>
                      <th>{{ t('devDoc.Remarks') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td>timestamp</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.timestamp') }}</td>
                      <td>{{t('devDoc.See')}} <a href="#sign" class="link">{{t('devDoc.InspectionInstructions')}}</a></td>
                    </tr>
                    <tr>
                      <td>nonce</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.nonce') }}</td>
                      <td>{{t('devDoc.See')}} <a href="#sign" class="link">{{t('devDoc.InspectionInstructions')}}</a></td>
                    </tr>
                    <tr>
                      <td>sign</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.Sign') }}</td>
                      <td>{{t('devDoc.See')}} <a href="#sign" class="link">{{t('devDoc.InspectionInstructions')}}</a></td>
                    </tr>
                    <tr>
                      <td>body</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.MessageContent') }}</td>
                      <td>{{ t('devDoc.JsonInfo') }}</td>
                    </tr>
                    </tbody>
                  </table>
                  <!--            参数说明 多行文本-->
                  <pre>
[
  {
    "merchantId":"66790b44b49fe47b7d13b744",
    "mainCoinType":999999,
    "callUrl":"http://192.168.0.116:8081/api/v2/generateAddress"
  }
]
                  </pre>
                  <!--            body 参数字段-->
                  <h6 class="">2.1.2.2.2 {{ t('devDoc.bodyParamsField') }}</h6>
                  <!--                body 参数字段-->
                  <table>
                    <thead>
                    <tr>
                      <th>{{ t('devDoc.bodyParamsName')}} </th>
                      <th>{{ t('devDoc.Type')}} </th>
                      <th>{{ t('devDoc.Required')}} </th>
                      <th>{{ t('devDoc.Explain')}} </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                      <td>merchantId</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.merchantIdInfo')}} </td>
                    </tr>
                    <tr>
                      <td>mainCoinType</td>
                      <td>Integer</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.mainCoinTypeInfo')}} </td>
                    </tr>
                    <tr>
                      <td>callUrl</td>
                      <td>String</td>
                      <td>{{ t('devDoc.Yes')}}</td>
                      <td>{{ t('devDoc.callUrlInfo')}}</td>
                    </tr>
                    </tbody>
                  </table>
                  <!--            示例-->
                  <h6 class="eg">2.1.2.2.3 {{ t('devDoc.Example') }}</h6>
                  <pre>
{
  "timestamp": 1720407493211,
  "nonce": 4978619,
  "sign": "7d33deb6b6c1463bba6ead47ebf58551",
  "body":
    [
      {
        "merchantId":"66790b44b49fe47b7d13b744",
        "mainCoinType":999999,
        "callUrl":"http://192.168.0.116:8081/api/v2/withdraw"
      }
    ]
}
                  </pre>

                  <h5 class="">2.1.2.3 {{ t('devDoc.StatusCode')}}</h5>
                  <!--            返回状态码表-->
                  <table style="width: 400px">
                    <thead>
                    <tr>
                      <th>code</th>
                      <th>{{ t('devDoc.Interpret')}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(item, key) in withdrawalCodeLis1t" :key="key">
                      <td>{{ item.code }}</td>
                      <td>{{ item.description}}</td>
                    </tr>
                    </tbody>
                  </table>

                  <!--            调取示例-->
                  <h4 class="">2.1.3 {{ t('devDoc.CallExamples')}}</h4>
                  <h5 class="">2.1.3.1 {{ t('devDoc.Success')}}</h5>
                  <pre>
{
    "code":200,
    "data":null,
    "msg":"成功"
}
                  </pre>

                  <h5 class="">2.1.3.2 {{ t('devDoc.Failed')}}</h5>
                  <pre>
{
    "code": 40129,
    "data": null,
    "msg": "sign錯誤"
}
                  </pre>
                </div>

              </div>

<!--          验签说明-->
              <div class="SignDescription">
                <h3 class="" id="sign"> {{ t('devDoc.SignDescription') }}</h3>
                <div class="signInfo">
                  <p class="Info1">{{ t('devDoc.SignDesc1') }}</p>
                  <pre class="signExpression">sign = md5(body + key + nonce + timestamp).toLowerCase()</pre>
                  <p>{{ t('devDoc.SignDesc2') }}</p>
                </div>
              </div>
              </div>
            </el-main>
          </el-container>

    </el-container>
  </div>

</template>

<script setup>

import {ref, watch, computed, onMounted} from "vue"
import {useRoute, useRouter} from "vue-router";
// 导入前台页面 header 组件
import walletHeader from '@/components/common/walletHeader.vue';
// 导入前台页面 footer 组件
import walletFooter from '@/components/common/walletFooter.vue';

import {useI18n} from "vue-i18n";
const {t} = useI18n();



const baseUrl = import.meta.env.VITE_BASE_URL;

const router = useRouter();
const route = useRoute();

// 目录数据
const directoryData = ref([
  {href: "#generateAddress", title: t('title.GenerateAddress')},
  {href: "#withdrawal", title: t('title.Withdrawal')}
])

// 生成地址 状态码 表数据
const generateAddressCodeList = ref([
  { code: 40101, description: t('devDoc.BodyIsNull')},
  { code: 40122, description: t('devDoc.NonceIsNull')},
  { code: 40124, description: t('devDoc.TimestampIsNull')},
  { code: 40123, description: t('devDoc.SignIsNull')},
  { code: 40125, description: t('devDoc.BodyError')},
  { code: 10125, description: t('devDoc.GetDataError')},
  { code: 40126, description: t('devDoc.NotVIPOrFreeze')},
  { code: 40127, description: t('devDoc.MainCoinTypeError')},
  { code: 200, description: t('devDoc.Success')}
])

// 提币 状态码 表数据
const withdrawalCodeLis1t = ref([
  { code: 40101, description: t('devDoc.BodyIsNull')},
  { code: 40122, description: t('devDoc.NonceIsNull')},
  { code: 40124, description: t('devDoc.TimestampIsNull')},
  { code: 40123, description: t('devDoc.SignIsNull')},
  { code: 40125, description: t('devDoc.BodyError')},
  { code: 10125, description: t('devDoc.GetDataError')},
  { code: 40126, description: t('devDoc.NotVIPOrFreeze')},
  { code: 40127, description: t('devDoc.MainCoinTypeError')},
  { code: 200, description: t('devDoc.Success')},
  { code: 10127, description: t('devDoc.TokenError')},
  { code: 10128, description: t('devDoc.PrivateKey')},
  { code: 40131, description: t('devDoc.ChainIdError')},
  { code: 10124, description: t('devDoc.InsertError')},
  { code: 40132, description: t('devDoc.TRXError')},
  { code: 40133, description: t('devDoc.TransactionFailed')},
  { code: 40129, description: t('devDoc.SignError')}

])


const tableData = ref([])
// const lang = useLang()
// const locale = computed(() => anchorLocale[lang.value])

// 初始化一个响应式变量activeIndex，用于存储激活的索引值
const activeIndex = ref('');

// 路由跳转方法
const navigateToRoute = (route) => {
  router.push(route);
}
// 更新activeIndex的方法
const updateActiveIndex = () => {
  activeIndex.value = route.path;
};

// 监听路由变化并更新activeIndex
watch(
    () => route.path,
    (newPath) => {
      updateActiveIndex();
    },
    {immediate: true} // 立即执行一次回调
);

const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath)
}
</script>

<style lang="less" scoped>

:deep(.el-anchor__link){
  font-size: 14px;
  font-weight: bold;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 5px .2rem;
}

// 链接样式
.link {
  color: #409eff;
}

.directBox{
  a{
    font-size: .16rem;
    font-weight: 700;
  }
}

// 标题
.apiTitle {
  font-size: 34px;
  margin-bottom: 40px;
}
// 以下为 block watch的API接口....
.tips1{
  font-size: .16rem;
  margin: .3rem 0;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  //页面标题
  h1 {

  }

  //目录 、 接口明细
  h2 {
    margin: .2rem 0;

  }

  .apiItem {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .sceneContent{
      margin: .1rem 0;
      font-size: .16rem;
      font-weight: bold;
    }

    //生成地址 、 提币
    h3 {
      //margin-left: .2rem;
      margin: .1rem 0;

    }

    //场景说明 接口详情 调取示例
    h4 {
      font-size: .16rem;
      //margin-left: .4rem;
      margin: .1rem 0;

    }

    //接口地址 参数 状态码表 成功 失败
    h5 {
      font-size: .16rem;
      //margin-left: .6rem;
      margin: .1rem 0;
    }

    //参数说明 body参数字段 示例
    h6 {
      font-size: .16rem;
      //margin-left: .8rem;
      margin: .1rem 0;
    }
  }




}

// 验签说明
.SignDescription{
  width: 60%;
  height: 200px;

  h3{
    margin: .2rem 0;
    text-align: left;
  }
  .signInfo{
      text-align: left;

    .signExpression{
      margin: 10px 0;
    }
    .Info1{
      line-height: 1.8;
    }
  }
}

table {
  width: 100%;
  margin: .4rem 0;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 10px;
  text-align: center;

}

th {
  background-color: #000;
  color: #fff;
}

textarea{
  border: none;

}

pre{
  text-align: left;
}

/* 定义可滚动区域的样式 */
.scrollable-content {
  height: calc(100% - 48px); /* 根据实际情况调整高度 */
  overflow-y: hidden;
  padding-right: 16px; /* 为滚动条预留空间 */
}

/* 隐藏滚动条但保持滚动功能 */
.scrollable-content::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.scrollable-content::-webkit-scrollbar-track {
  background-color: transparent;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 4px;
}

/* 鼠标悬停时改变滚动条颜色 */
.scrollable-content:hover::-webkit-scrollbar-thumb {
  background-color: #555;
}
</style>